<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
</head>
<style>
    html {
        height: 100%;
    }

    body {
        width: 100%;
        height: 100%;
        margin: 0;
        overflow: hidden;
    }

    .wrap {
        position: relative;
        overflow: hidden;
    }

    .box {
        position: absolute;
        list-style: none;
        left: 0;
        top: 0;
        padding: 0;
        margin: 0;
    }

    .box li {
        float: left;
    }

    .box {
        position: relative;
        height: 600px;
        width: 100%;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: red;
    }

    .box1 {
        height: 600px;
        padding-top: 100px;
    }

    .box2 {
        background: yellow;
        -webkit-overflow-scrolling: touch;
        overflow-y: scroll;
    }

    .box3 {
        background: yellowgreen;
        -webkit-overflow-scrolling: touch;
        overflow-y: scroll;
    }

    .box4 {
        background: orange;
        -webkit-overflow-scrolling: touch;
        overflow-y: scroll;
    }

    .box5 {
        background: cyan;
    }

    .box5 {
        background: red;
    }
</style>

<body>
    <div class="wrap">
        <ul class="box">
            <li>
                <div class="box1 box2"><iframe src="https://hr-x.pingan.com.cn/questionReport/index.html?questionnaireCode=9d91cd0b6e26ac52016f5b6d07de322b" width="100%" height="100%"></iframe></div>
            </li>
            <li>
                <div class="box1 box3"><iframe src="./chart.html" width="100%" height="100%"></iframe></div>
            </li>
            <li>
                <div class="box1 box4"><iframe src="https://www.echartsjs.com/examples/zh/index.html" width="100%"
                        height="100%"></iframe></div>
            </li>
            <li>
                <div class="box1 box5"><iframe src="https://www.echartsjs.com/examples/zh/editor.html?c=line-sections"
                        width="100%" height="100%"></iframe></div>
            </li>
            <li>
                <div class="box1 box4"><iframe src="https://www.baidu.com" width="100%" height="100%"></iframe></div>
            </li>
            <li>
                <div class="box1 box6"><iframe src="https://www.baidu.com" width="100%" height="100%"></iframe></div>
            </li>
        </ul>
    </div>
    <script>
        var aLi = document.querySelectorAll(".box li");
        var box = document.querySelector('.box');
        var wrap = document.querySelector('.wrap');
        var aLiWidth = box.offsetWidth;
        console.log('aLiWidth: ' + aLiWidth)
        wrap.style.height = aLi[0].offsetHeight + 'px';
        // 设置盒子的宽度
        box.style.width = aLi.length * 100 + '%';
        for (var i = 0; i < aLi.length; i++) {
            aLi[i].style.width = 1 / aLi.length * 100 + '%';
        };
        // 初始化手指坐标点
        var startPoint = 0;
        var startEle = 0;
        //手指按下
        wrap.addEventListener("touchstart", function (e) {
            startPoint = e.changedTouches[0].pageX;
            startEle = box.offsetLeft;
        });
        //手指滑动
        wrap.addEventListener("touchmove", function (e) {
            var currPoint = e.changedTouches[0].pageX;
            var disX = currPoint - startPoint;
            var left = startEle + disX;
            box.style.left = left + 'px';
        });
        //当手指抬起的时候，判断图片滚动离左右的距离，当
        wrap.addEventListener("touchend", function (e) {
            var left = box.offsetLeft;
            // 判断正在滚动的图片距离左右图片的远近，以及是否为最后一张或者第一张
            var currNum = Math.round(-left / aLiWidth);
            currNum = currNum >= (aLi.length - 1) ? aLi.length - 1 : currNum;
            currNum = currNum <= 0 ? 0 : currNum;
            box.style.left = -currNum * wrap.offsetWidth + 'px';
        })

    </script>

</body>

</html>